<template>
  <div class="board-page-wrapper">
    <div class="table-wrapper">
      <div class="action-wrapper">
        <el-row>
          <el-col :span="3">
            <el-radio-group v-model="queryParams.quesStatus" style="margin-bottom: 20px" @change="handleStatusChange">
              <el-radio-button label="0">待回复</el-radio-button>
              <el-radio-button label="1">已回复</el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">意见反馈</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="table-content">
        <el-table :header-cell-style="{ background: '#E1ECF7' }" v-loading="loading" :data="tableList" border>
          <el-table-column label="单号" align="center" prop="quesId" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="200px" />
          <el-table-column label="标题" align="center" prop="quesTitle" />
          <el-table-column label="描述" align="center" prop="quesDescribe" />
          <el-table-column label="状态" align="center" prop="quesStatus" width="120px">
            <template slot-scope="scope">
              <span>{{ scope.row.quesStatus === '0' ? '待回复' : '已回复' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-document" @click="handleOpenDetails(scope.row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- 添加对话框 -->
      <el-dialog title="问题反馈" :visible.sync="open" width="1000px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <div class="add-form">
            <div class="add-form-item">
              <el-form-item label="问题" prop="quesTitle">
                <el-input v-model="form.quesTitle" placeholder="请输入问题" />
              </el-form-item>
            </div>
            <div class="add-form-item">
              <el-form-item label="描述" prop="quesDescribe">
                <el-input v-model="form.quesDescribe" type="textarea" :rows="4" placeholder="请详细描述问题" />
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="意见反馈详情"
        :visible.sync="details.open"
        width="1300px"
        style="margin-top: 10px !important; top: 2vh;"
        append-to-body
      >
        <div class="details-dialog">
          <div style="margin-bottom: 24px">
            <div class="title-wrapper">
              <h3 class="title">{{ currentRow.quesTitle }}</h3>
              <p class="title-time">{{ currentRow.quesUserName }} {{ currentRow.createTime }}</p>
            </div>
            <p style="font-size: 16px">{{ currentRow.quesDescribe }}</p>
          </div>
          <el-card v-for="(item, index) in replyList" class="box-card" shadow="hover" :key="'replyList' + index">
            <div slot="header" class="clearfix">
              <span v-if="item.replyType === '1'" style="font-size: 16px">回复内容</span>
              <span style="float: right; padding: 3px 0; color: #666666"
                >{{ item.createBy }} {{ item.createTime }}</span
              >
            </div>
            <div>
              {{ item.replyDescribe }}
            </div>
          </el-card>
          <el-card shadow="never" v-if="queryParams.quesStatus!=1">
            <el-form label-position="top" ref="replyForm" :model="replyForm" :rules="replyRules" label-width="80px">
              <el-form-item label="回复内容" prop="replyDescribe">
                <el-input rows="4" v-model="replyForm.replyDescribe" placeholder="请输入回复内容" type="textarea" />
              </el-form-item>
            </el-form>
          </el-card>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleReplySubmit" v-if="queryParams.quesStatus!=1">提 交</el-button>
          <el-button @click="details.open = false">返 回</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getFeedback, listFeedback, addFeedback, updateFeedback } from '@/api/problem/feedback'

  export default {
    name: 'repairOrder',
    data() {
      return {
        // 遮罩层
        loading: false,
        open: false,
        details: {
          open: false
        },
        currentRow: {
        },
        replyData: {},
        replyList: [],
        // 表单
        replyForm: {
          replyDescribe: undefined
        },
        // 表单校验
        replyRules: {
          replyDescribe: [{ required: true, message: '回复内容不能为空', trigger: 'blur' }]
        },
        // 总条数
        total: 0,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          userName: [{ required: true, message: '问题不能为空', trigger: 'blur' }],
          nickName: [{ required: true, message: '问题描述不能为空', trigger: 'blur' }]
        },
        // 表格数据
        tableList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          quesStatus: '0' // 状态
        }
      }
    },
    components: {},
    created() {
      this.getList()
    },
    methods: {
      handleStatusChange(val) {
        this.queryParams.quesStatus = val
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 查询问题反馈列表 */
      getList() {
        this.loading = true
        listFeedback(this.queryParams)
          .then(response => {
            this.tableList = response.rows
            this.total = response.total
          })
          .finally(() => {
            this.loading = false
          })
      },
      // 表单重置
      reset() {
        this.form = {}
        this.resetForm('form')
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
      },
      handleOpenDetails(row) {
        if (!row.quesId) return
        getFeedback(row.quesId).then(res => {
          if (res.code === 200) {
            this.details.open = true
            this.replyData = res.data
            this.replyList = res.data.sysQuestionFeedbackReplyList || []
          }
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.$httpHandler(addFeedback, Object.assign(this.form, {
              quesStatus: this.queryParams.quesStatus
            }))) {
              this.open = false;
              this.queryParams.pageNum = 1
              this.getList()
            }
          }
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      handleReplySubmit() {
        this.$refs['replyForm'].validate((valid) => {
          console.log(valid)
          if (valid) {
            if (this.$httpHandler(updateFeedback, {
              quesId: this.replyData.quesId,
              sysQuestionFeedbackReplyList: [{
                replyDescribe: this.replyForm.replyDescribe,
                replyType: 2
              }]
            })) {
              this.details.open = false;
              this.replyForm.replyDescribe = '';
              this.queryParams.pageNum = 1;
              this.getList()
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .board-page-wrapper {
    padding: 50px 38px;
    .table-wrapper {
      border-top: 2px solid #3672fe;
      background-color: #ffffff;
      .action-wrapper {
        margin-top: 20px;
      }
    }
  }
  .details-dialog {
    height: 600px;
    overflow: auto;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 28px;
    margin: -12px 10px 20px;
    background: #f7fafd;
    padding: 32px;
    border: 1px solid #d8e2f0;
    .title-wrapper {
      margin-top: -20px;
      .title {
        text-align: center;
        font-size: 24px;
        color: #333333;
      }
      .title-time {
        margin: 0;
        text-align: right;
        color: #666666;
      }
    }
    .box-card {
      margin: 10px 0 20px;
    }
  }
  .dialog-footer {
    text-align: right;
    margin: -30px 12px 10px;
  }
</style>
